<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="keys" content="">
    <meta name="author" content="">
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/login.css}">
    <script th:src="@{/jquery/jquery-2.1.1.min.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/layer/layer.js}"></script>
    <script th:src="@{|/jquery/jquery.md5.js|}"></script>
    <style>

    </style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <div><a class="navbar-brand" href="login" style="font-size:32px;">平台</a></div>
        </div>
    </div>
</nav>

<div class="container">
    <form class="form-signin" role="form" id="loginForm">
        <h2 th:text="#{login.tip}" class="form-signin-heading"><i class="glyphicon glyphicon-user"></i> 用户登录</h2>
        <div id="phoneForm">
            <div class="form-group has-success has-feedback">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button type="button" class="btn btn-primary btn-xs" onclick="changeFaceLogin()">刷脸登录</button>
                <button type="button" class="btn btn-primary btn-xs" onclick="changeEmailLogin()">邮箱登录</button>
                <button type="button" class="btn btn-primary btn-xs" onclick="changePhoneLogin()">手机号登录</button>
                <BR>
                <input type="hidden" name="loginType" value="com.woniu.utils.UaccountRealm">
                <input type="text" class="form-control" id="uname" name="uaccount" th:placeholder="#{login.username}" onfocus="fo()"
                       onblur="bl()"><br>
                <span id="tips" style="color:red;"></span>
                <span class="glyphicon glyphicon-user form-control-feedback" style="margin-top:25px"></span>
            </div>
            <div class="form-group has-success has-feedback">
                <input type="password" class="form-control" id="upwd" name="upwd" th:placeholder="#{login.password}" onfocus="fo2()"
                       onblur="bl2()" style="margin-top:10px;">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="#" id="forgetPwd" style="color:blue;" onclick="forgetPwd()">忘记密码?</a>
                <span id="tip" style="color:red;"></span>
                <span class="glyphicon glyphicon-lock form-control-feedback" ></span><br><br>
                [[#{login.key}]]
                <input  type="text" name="code" id="code" size="10" style="height:25px;vertical-align:middle">
                <img id="imgValidate" src="/loginDoo?" style="vertical-align:middle">
                <img th:src="@{/img/p1.jpg}" width="25" onclick="refresh()" style="vertical-align:middle">
                <br/><br/>
            </div>
            <a class="btn btn-lg btn-success btn-block" onclick="dologin()" th:text="#{login.btn}"> 登录</a>
            <a class="btn btn-sm" th:href="@{/login(l='zh_CN')}">中文</a>
            <a class="btn btn-sm" th:href="@{/login(l='en_US')}">English</a>

        </div>

    </form>
</div>
<script>
    //刷新验证码
    function refresh() {
        a = parseInt(100 * Math.random());//随机生成一个整数
        //给url加上随机参数，使图片链接每次都不同，从而解决因为浏览器缓存而不更新的问题。
        url = "/loginDoo?" + a;
        document.getElementById("imgValidate").src = url;
    }
    //账号登录
    function dologin() {
        //验证码校验
        let code = $("#code").val();
        if (code == null || code == "") {
            layer.msg("验证码不能为空", {time: 1000, icon: 5, shift: 6}, function () {
            });
            return;
        }

        var unameVal = $("#uname").val();
        if (unameVal == null || unameVal == "") {
            layer.msg("账号不能为空", {time: 1000, icon: 5, shift: 6}, function () {
            });
            return;
        }
        var upwdVal = $("#upwd").val();
        if (upwdVal === null || upwdVal == "") {
            layer.msg("密码不能为空", {time: 1000, icon: 5, shift: 6}, function () {
            });
            return;
        }
        //密码加密
        var One=$.md5($("#upwd").val());
        $("#upwd").val(One);
        var url = "/loginDo";
        var formMassage = $("#loginForm").serialize();
        $.post(url, formMassage, function (data) {
            if (data.result) {
                layer.msg("登录成功", {time: 2000, icon: 4}, function () {
                    location.href = "/main";
                });
            } else if (data.codeErro) {
                layer.msg(data.errorMessage, {time: 2000, icon: 5}, function () {
                    $("#code").val("");
                    $("#uname").val(data.uaccount);
                    $("#upwd").val("");
                    refresh();
                });
            } else {
                layer.msg(data.errorMessage, {time: 2000, icon: 5}, function () {
                    $("#code").val("");
                    $("#uname").val(data.uaccount);
                    $("#upwd").val("");
                    refresh();
                });
            }

        })
    }
    //忘记密码
    function doForgetPwd(){
        url="/forgetPwd";
        var da=$("#loginForm").serialize();
        $.get(url,da,function (data){
            if (data.result){
                layer.msg(data.massage, {time:1000, icon:5, shift:3}, function(){});
                location.href="/login";
            }else{
                layer.msg(data.massage, {time:1000, icon:5, shift:3}, function(){});
            }
        })
    }
    //发送邮箱验证码
    var countdown1 = 60;

    function settime2() {
        var email = $("#email").val();
        if(!(/^^(([0-9a-zA-Z]+)|([0-9a-zA-Z]+[_.0-9a-zA-Z-]*[0-9a-zA-Z]+))@([a-zA-Z0-9-]+[.])+([a-zA-Z]{2}|net|NET|com|COM|gov|GOV|mil|MIL|org|ORG|edu|EDU|int|INT)$/.test(email))) {
            layer.msg("邮箱格式不正确，请重填", {time:1000, icon:5, shift:3}, function(){});
            return;
        }
        if (countdown1 == 0) {
            $("#yanBtn").removeAttr("disabled");
            $("#yanBtn").val("免费获取验证码");
            countdown1 = 60;
            return;
        } else if (countdown1 == 60) {
            url = "/sendEmailMassage";
            var da = {"email": $("#email").val()}
            $.get(url, da, function (data) {
                if (data.result) {
                    layer.msg(data.emailLoginMassage, {time:1000, icon:4, shift:4}, function(){});
                } else {
                    // layer.msg(data.loginMassage, {time:1000, icon:5, shift:3}, function(){});
                    layer.msg(data.emailLoginMassage, {time:1000, icon:4, shift:4}, function(){});
                }
            })
            $("#yanBtn").attr("disabled", true);
            $("#yanBtn").val("重新发送(" + countdown1 + ")");
            countdown1--;
        } else {
            $("#yanBtn").attr("disabled", true);
            $("#yanBtn").val("重新发送(" + countdown1 + ")");
            countdown1--;
        }
        setTimeout(function () {
                settime2()
            }
            , 1000)
    }

    //发送短信验证码
    var countdown = 60;

    function settime() {
        var phone = $("#uphone").val();
        if(!(/^1[3456789]\d{9}$/.test(phone))) {
            layer.msg("手机号码有误，请重填", {time:1000, icon:5, shift:3}, function(){});
            return;
        }
        if (countdown == 0) {
            $("#yanBtn").removeAttr("disabled");
            $("#yanBtn").val("免费获取验证码");
            countdown = 60;
            return;
        } else if (countdown == 60) {
            url = "/sendMassage";
            var da = {"uphone": $("#uphone").val()}
            $.get(url, da, function (data) {
                if (data.result) {
                    layer.msg("短信发送成功", {time:1000, icon:4, shift:4}, function(){});
                } else {
                    // layer.msg(data.loginMassage, {time:1000, icon:5, shift:3}, function(){});
                    alert(data.loginMassage);
                }
            })
            $("#yanBtn").attr("disabled", true);
            $("#yanBtn").val("重新发送(" + countdown + ")");
            countdown--;
        } else {
            $("#yanBtn").attr("disabled", true);
            $("#yanBtn").val("重新发送(" + countdown + ")");
            countdown--;
        }
        setTimeout(function () {
                settime()
            }
            , 1000)
    }
    //手机号登录
    function doPhonelogin() {
        url = "/loginDo";
        var formMassage = $("#loginForm").serialize();
        $.get(url, formMassage, function (data) {
            if (data.result) {
                location.href = "/main";
            } else {
                layer.msg(data.errorMessage, {time: 1000, icon: 5, shift: 3}, function () {});
            }
        });
    }

    //刷脸登录界面
    function changeFaceLogin(){
        location.href="/jumpGetface";
    }

    //账号登录界面
    function changeAccountLogin() {
        location.href = "/login"
    }
    //忘记密码页面
    function forgetPwd(){
        var str = '';
        str += '<div class="form-group has-success has-feedback" >';
        str += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n' +
            '   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n' +
            '   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
        str += '<button type="button" class="btn btn-primary btn-xs" onclick="changeAccountLogin()">账号登录</button><BR>';
        str+=  '<input type="hidden" name="loginType" value="com.woniu.utils.UphoneRealm">';
        str += '<input type="text" class="form-control" id="uphone" name="uphone" placeholder="请输入手机号" >';
        str += ' <input type="text" class="form-control" id="yan" name="upwd" placeholder="请输入验证码"  style="margin-top:10px;">\n'
        str += '<span id="phoneTips" style="color:red;"></span>';
        str += '<span class="glyphicon glyphicon-user form-control-feedback" style="margin-top:25px"></span>';
        str += '<input class="btn btn-info" id="yanBtn"  type="button" id="btn" value="免费获取验证码" onclick="settime()"/><br>';
        str += '</div>';
        str += '<a class="btn btn-lg btn-success btn-block" onclick="doForgetPwd()">重置密码</a>';
        $("#phoneForm").html(str);
    }
    //手机号登录界面
    function changePhoneLogin() {
        var str = '';
        str += '<div class="form-group has-success has-feedback" >';
        str += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n' +
            '   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
        str += '<button type="button" class="btn btn-primary btn-xs" onclick="changeAccountLogin()">账号登录</button>';
        str += '<button type="button" class="btn btn-primary btn-xs" onclick="changeEmailLogin()">邮箱登录</button>';
        str+='<input type="hidden" name="loginType" value="com.woniu.utils.UphoneRealm">';
        str += '<input type="text" class="form-control" id="uphone" name="uphone" placeholder="请输入手机号" >';
        str += ' <input type="text" class="form-control" id="yan" name="upwd" placeholder="请输入验证码"  style="margin-top:10px;">\n'
        str += '<span id="phoneTips" style="color:red;"></span>';
        str += '<span class="glyphicon glyphicon-user form-control-feedback" style="margin-top:25px"></span>';
        str += '<input class="btn btn-info" id="yanBtn"  type="button" id="btn" value="免费获取验证码" onclick="settime()"/><br>';
        str += '</div>';
        str += '<a class="btn btn-lg btn-success btn-block" onclick="doPhonelogin()"> 登录</a>';
        $("#phoneForm").html(str);
    }
    //邮箱登录界面
    function changeEmailLogin(){
        var str = '';
        str += '<div class="form-group has-success has-feedback" >';
        str += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n' +
            '   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
        str += '<button type="button" class="btn btn-primary btn-xs" onclick="changeAccountLogin()">账号登录</button>';
        str += '<button type="button" class="btn btn-primary btn-xs" onclick="changePhoneLogin()">手机号登录</button>';
        str+='<input type="hidden" name="loginType" value="com.woniu.utils.EmailRealm">';
        str += '<input type="text" class="form-control" id="email" name="email" placeholder="请输入您的邮箱" >';
        str += ' <input type="text" class="form-control" id="yan" name="upwd" placeholder="请输入验证码"  style="margin-top:10px;">\n'
        str += '<span id="phoneTips" style="color:red;"></span>';
        str += '<span class="glyphicon glyphicon-user form-control-feedback" style="margin-top:25px"></span>';
        str += '<input class="btn btn-info" id="yanBtn"  type="button" id="btn" value="免费获取验证码" onclick="settime2()"/><br>';
        str += '</div>';
        str += '<a class="btn btn-lg btn-success btn-block" onclick="doPhonelogin()"> 登录</a>';
        $("#phoneForm").html(str);
    }
    //账号
    function fo() {
        $("#tips").text("");
    }

    function bl() {
        if(!(/^[a-zA-Z0-9][a-zA-Z0-9_]{2,12}$/.test($("#uname").val()))) {
            layer.msg("账号仅支持字母数字以及下划线", {time:2000, icon:5, shift:3}, function(){});
            $("#uname").val("");
            return;
        }

        var unameVal = $("#uname").val();
        if (unameVal == null || unameVal == "") {
            $("#tips").text("账号不能为空");
        } else if (unameVal.length < 4 || unameVal.length > 12) {
            $("#tips").text("账号长度不符合规则");
        }
    }

    function fo2() {
        $("#tip").text("");
    }

    function bl2() {
        var upwdVal = $("#upwd").val();
        if (upwdVal == null || upwdVal == "") {
            $("#tip").text("密码不能为空");
        } else if (upwdVal.length < 2 || upwdVal.length > 8) {
            $("#tip").text("密码长度不符合规则");
        }
    }

</script>
</body>
</html>